import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Item from './Item'
import Blank from './Blank'

function List(props) {
    let listContent = props.list.length ? <ul>{props.list.map(item => <Item
        key={item.id}
        detail={item}
        deleteItem={props.deleteItem}
        changeStatus={props.changeStatus}
    />)}</ul> : <Blank />;
    return (
        <div className='list-wrapper'>
            {listContent}
        </div>
    )
}
List.prototype = {
    list: PropTypes.array.isRequired,
    deleteItem: PropTypes.func.isRequired,
    changeStatus: PropTypes.func.isRequired
}

export default List
